<template>
    <div class="temp">
        <!-- 购物车组件 -->
        <div class="section">
            <div class="location">
                <span>当前位置：</span>
                <a href="/index.html">首页</a> &gt;
                <a href="/cart.html">购物车</a>
            </div>
        </div>

        <div class="section">
            <div class="wrapper">
                <div class="bg-wrap">
                    <!--购物车头部-->
                    <div class="cart-head clearfix">
                        <h2>
                            <i class="iconfont icon-cart"></i>我的购物车</h2>
                        <div class="cart-setp">
                            <ul>
                                <li class="first active">
                                    <div class="progress">
                                        <span>1</span>
                                        放进购物车
                                    </div>
                                </li>
                                <li>
                                    <div class="progress">
                                        <span>2</span>
                                        填写订单信息
                                    </div>
                                </li>
                                <li class="last">
                                    <div class="progress">
                                        <span>3</span>
                                        支付/确认订单
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--购物车头部-->
                    <!--商品列表-->
                    {{ischeck}}{{ischeckbox}}
                    <div class="cart-box">
                        <input id="jsondata" name="jsondata" type="hidden">
                        <table width="100%" align="center" class="cart-table" border="0" cellspacing="0" cellpadding="8">
                            <tbody>
                                <tr>
                                    <th width="48" align="center">
                                        <el-button :disabled="carlist.length<=0" v-bind="{type:ischeckbox?'danger':'success'}" @click='checkAll'>{{checktext}}</el-button>
                                    </th>
                                    <th align="left" colspan="2">商品信息</th>
                                    <th width="84" align="left">单价</th>
                                    <th width="104" align="center">数量</th>
                                    <th width="104" align="left">金额(元)</th>
                                    <th width="54" align="center">操作</th>
                                </tr>
                                <tr>
                                    <td colspan="10">
                                        <div class="msg-tips" v-if="carlist.length<=0">
                                            <div class="icon warning">
                                                <i class="iconfont icon-tip"></i>
                                            </div>
                                            <div class="info">
                                                <strong>购物车没有商品！</strong>
                                                <p>您的购物车为空，
                                                    <a href="/index.html">马上去购物</a>吧！</p>
                                            </div>
                                        </div>
                                    </td>
                                </tr>

                                <tr v-for="(item,index) in carlist" :key='index' v-if="carlist.length>=0">
                                    <td width="48">
                                        <!-- element-ui e-switch -->
                                        <el-switch v-model="ischeck[index]" on-text="取消" off-text="选择" @change='tfbool(index)'>
                                        </el-switch>
                                    </td>
                                    <td align="left" colspan="2">
                                        <img :src="item.img_url" alt="" width="50" height="50">
                                        <span v-text="item.title"></span>
                                    </td>
                                    <td width="84" v-text="item.sell_price"></td>
                                    <td width="104">
                                        <miniNum :obj="{gindex:index,bcount:localArr[index],gid:item.id}" @jiajian='getval'></miniNum>
                                    </td>
                                    <td width="104">{{localArr[index] * item.sell_price}}</td>
                                    <td width="54">
                                        <el-button type='success' @click='delchk(item.id)'>删除</el-button>
                                    </td>
                                </tr>


                                <tr>
                                    <th align="right" colspan="8">
                                        <!-- {{count}} -->
                                        已选择商品
                                        <b class="red" id="totalQuantity">{{fullname.js}}</b> 件 &nbsp;&nbsp;&nbsp;
                                        {{fullId}}
                                        <!-- {{money}} {{fullname.jg}}-->
                                        商品总金额（不含运费）：
                                        <span class="red">￥</span>
                                        <b class="red" id="totalAmount">{{fullname.jg}}</b>元
                                    </th>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!--/商品列表-->
                    <!--购物车底部-->
                    <div class="cart-foot clearfix">
                        <div class="right-box">
                            <button class="button" onclick="javascript:location.href='/index.html';">继续购物</button>
                            <router-link  v-bind="{to:'/site/goodsshopping/'+fullId}">
                                <!-- <button class="submit" >立即结算</button> -->
                                <el-button type="success"  class="submit">立即结算</el-button>
                            </router-link>
                        </div>
                    </div>
                    <!--购物车底部-->
                </div>
            </div>
        </div>

        <!-- 购物车组件/ -->
    </div>
</template>
<script>
    // 导入kits帮助类的vm.js组件
    import {
        vm,
        key
    } from '../kits/vm.js';

    // 导入local本地帮助类
    import {
        setItem,
        getItem,
        remoteItem,
        setOneItem
    } from '../kits/localStrone.js';

    // 导入加减自己封装的组件,当成自己的子组件
    import miniNum from '../../subcom/miniNum.vue';

    export default {
        // 把帮助类组件,当成我的子组件
        components: {
            miniNum
        },
        data() {
            return {
                carlist: [], //API购物车里面的数据
                // one: 0, //购买数量
                totolcount: 0, //总金额 API数据接口有返回,但是为0
                localArr: [], //存本地里面的购物车的购买数量
                ischeck: [], //存储开关按钮的true和false值,值从本地来,默认一开始都是false
                count: 0, //下方的已选择商品 0 件 
                money: 0, //下方的总价格
                checktext: "全选",
                ischeckbox: false, //全选按钮, 一开始默认为不全选
                shopID: [], // 存储本地的localStroage里面的id
                shopObj: {}, // 结合localArr,shopID 拼接成{gid:商品id,count:商品购买数量}
                arrID: '', //存为true的商品的ID
            }
        },
        mounted() {
            // 一开始获取api里面的数据
            this.getcarlist();
        },
        computed: {
            // 计算属性  
            // 当点击全选或者反选的时候,并不会触发我的计算价格,所以用这个,只要ischeck里面的长度有变化,就会触发我计算
            // 因为有两个地方(件数,总价)用到计算属性,所以返回一个对象更好
            fullname() {
                // this.tfbool();
                // return

                // 件数
                var newArr = this.ischeck.filter(a => {
                    return a;
                });
                // 总价格
                var zjg = 0; //要定义一个变量,不能this.money+=,否则价格会双倍
                for (var i = 0; i < this.ischeck.length; i++) {
                    if (this.ischeck[i]) {
                        zjg += this.localArr[i] * this.carlist[i].sell_price;
                    }
                }
                this.money = zjg;
                return {
                    js: newArr.length, //件数
                    jg: this.money //总价格
                };
            },


            // 2.0 第二个需求,当点击提交订单的时候,需要把选中商品的ID传到下单详情页面
            fullId() {
                // var newArr = this.ischeck.filter(a => {
                //     return a;
                // });
                // return newArr;
                // 因为this.ischeck数组,和我API this.carlist回来数据的数组长度是一样的,一一对应,所以只要知道true的索引,然后去API里面的那个数组里面,找到ID
                var arrIndex = []; //存的都是我的true的id;
                for (var i = 0; i < this.ischeck.length; i++) {
                    if (this.ischeck[i]) {
                        arrIndex.push(this.carlist[i].id);
                    }
                }
                this.arrID = arrIndex.join(',');
                return this.arrID;
            }

            //     // console.log(index);

            //     // 总价格
            //     // console.log(index);
            //     // for (var i = 0; i < this.ischeck.length; i++) {
            //     //     if (this.ischeck[i]) {
            //     //         this.money += this.localArr[i] * this.carlist[i].sell_price;
            //     //     }
            //     // if (!this.ischeck[i]) {
            //     //     this.money -= this.localArr[i] * this.carlist[i].sell_price;
            //     // }
            // }
            // if (this.ischeck[index]) {
            //     // this.money += this.localArr[index] * this.carlist[index].sell_price;
            // }
            // if (!this.ischeck[index]) {
            //     // this.money -= this.localArr[index] * this.carlist[index].sell_price;
            // }
            // return {
            //     js: newArr.length,
            //     jg: this.money
            // };
            // }
        },
        methods: {
            // 父接子传过来的数据,将来当子组件中发出 this.$emit('key',this.val)的时候，就会自动触发这个gerval方法,将其中的
            getval(val) {
                // console.log(val); //val是子传过来的一个对象 {gindex:商品的索引,bcount:商品修改后的数量,gid:商品的ID }
                this.localArr[val.gindex] = val.bcount;
                // console.log(this.localArr);

                // console.log(val);
                setOneItem(val);


                // 子传过来的数据,同时应该更新car点击加减的时候,存在本地localStrorage里面


                // 出现bug,数量有改变,但是没有计算价格
                // 为了触发计算属性,要改变长度,才会触发,改变属性值是不是触发的
                this.ischeck.push(false);
                this.ischeck.pop();
            },
            // 删除功能
            delchk(gid) {
                // 思路: 删除是把本地的localstrage里面的这个数据删除
                remoteItem(gid);
                //  删除完后,从新执行获取购物车里面的数据,这个执行,需要调用接口,返回需要时间
                this.getcarlist();
                // 删除购物车的时候,同样把这个数据,传到layout.vue里面,更新顶部购物车的数据;
                // 触发组件 A 中的事件 作用: 传本地的数据给到layout.vue组件,单点删除的时候,更新顶部购物车的数据;
                vm.$emit(key, getItem());
            },
            // 全选功能
            checkAll() {
                // console.log(111111111);
                this.ischeckbox = !this.ischeckbox;
                if (this.ischeckbox) {
                    // console.log(22222222222);
                    this.checktext = '反选';
                    // 思路,点击全选的时候,下面的选项,全部勾选上
                    for (var i = 0; i < this.ischeck.length; i++) {
                        this.ischeck[i] = true;
                    }

                    // 为了触发计算属性,要改变长度,才会触发,改变属性值是不是触发的
                    this.ischeck.push(false);
                    this.ischeck.pop();
                } else {
                    // console.log(3333333333333333);
                    this.checktext = '全选';
                    for (var i = 0; i < this.ischeck.length; i++) {
                        this.ischeck[i] = false;
                    }
                    // 为了触发计算属性,要改变长度,才会触发,改变属性值是不是触发的
                    this.ischeck.push(false);
                    this.ischeck.pop();
                }
                // this.ischeck
            },
            // 开关按钮触发
            tfbool(index) {
                // filter 遍历拿出值 ,做下方的已选择商品 0 件 功能
                var newArr = this.ischeck.filter(a => {
                    return a;
                })
                this.count = newArr.length;

                // console.log(newArr);

                // 找出选择的索引,计算总价到下方总价上
                // 思路: 通过开关的点击,传数组的索引过来,我就知道我点击的是谁,然后根据api返回的单价,和我本地数量,算总价格

                // console.log(index);
                if (this.ischeck[index]) {
                    this.money += this.localArr[index] * this.carlist[index].sell_price;
                }
                if (!this.ischeck[index]) {
                    this.money -= this.localArr[index] * this.carlist[index].sell_price;
                }


                // 当一个按钮有false的时候,上面的全选就不会变成反选,应该是全选
                // 思路: 当newArr.length(里面都是true)长度和this.ischeck(所有商品的true 和 false)长度比较,不相等,就应该变成全选
                if (newArr.length != this.ischeck.length) {
                    this.checktext = '全选';
                    this.ischeckbox = false;
                } else if (newArr.length == this.ischeck.length) {
                    // 思路:当下面的每个按钮都是选中,上面应该是反选了
                    this.checktext = '反选';
                    this.ischeckbox = true;
                }

            },
            // 获取购物车里面的数据
            getcarlist() {
                var carobj = getItem();

                // if (carobj == {}) {
                //     console.log(111);
                //     this.carlist = [];
                //     return;
                // }

                var carArr = []; //存本地获取出来的id
                var locallist = []; //存本地里面的购物车的购买数量
                var checklist = []; //存储开关按钮的true和false值
                for (var key in carobj) {
                    carArr.push(key);
                    locallist.push(carobj[key]);
                    checklist.push(false);
                }
                this.localArr = locallist;
                this.ischeck = checklist;
                var ids = carArr.join(',');

                // 当是最后一个的时候,ids没有值了,那就应该让数组变为空,并且不请求数据,才能删除最后那个数据
                if (!ids) {
                    this.carlist = [];
                    return;
                }
                // 算下方的已选择商品 0 件 ,根据ischeck数组里面,有几个true





                // console.log(ids);
                var url = '/site/comment/getshopcargoods/' + ids;
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        this.$message.error(res.data.message);
                        return;
                    }
                    // 成功

                    this.carlist = res.data.message;
                    // console.log(res);
                    // console.log(this.carlist);
                    // console.log(111111111)
                    // console.log(this.carlist.length);
                    // 购买的数量从本地浏览器拿值
                    // this.locallist
                    // this.one = typeof getItem(this.$route.params.infoID);
                })
            }
        }
    }
</script>
<style></style>